<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿问卷星demo</title>
    <!-- 引入Bootstrap UI库 -->
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- 引入Bootstrap完毕 -->
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 主页样式表 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 
        : )
     -->
</head>
<body>
    <!-- 顶部START -->
    <header>
        <h3></h3>
    </header>
    <!-- 顶部END -->
    <!-- 主要内容START -->
    <div class="main bx">
        <!-- <form action="ojbk.php"  method="get"> -->
        <form action="">
            <ul id="list">

            </ul>
            <div class="btn" style="width: 100%;margin: 0 auto;">
                <!-- <button type="submit" class="btn btn-primary">提交</button> -->
                <button type="button" id="tijiao" class="btn btn-primary" data-toggle="modal">
                    提交
                </button>
            </div>
        </form>
    </div>
    <!-- 主要内容END -->
    <!-- 底部START -->
    <footer>
        
    </footer>
    <!-- 底部END -->

    <!-- 结算时的模态框START -->
    <!-- 按钮：用于打开模态框 -->
   
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
        <div class="modal-content">
    
            <!-- 模态框头部 -->
            <div class="modal-header">
            <h4 class="modal-title">你的答题结果</h4>
            <button type="button" class="close" data-dismiss="modal" id="gb">&times;</button>
            </div>
    
            <!-- 模态框主体 -->
            <div class="modal-body">
                <table class="table">
                    <thead>
                      <tr>
                        <th>题号</th>
                        <th>正确答案</th>
                        <th>你的答案</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                  <div class="socre" style="display: flex; justify-content: space-around;">
                    <div class="dd">
                        <span>你答对了:</span><span id="dd" style="color:red"></span><span>道题</span>
                    </div>
                    <div class="zql">
                        <span>得分:</span><span id="df" style="color:red"></span>
                    </div>
                  </div>
            </div>
    
            <!-- 模态框底部 -->
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cz">重做</button>
            </div>
    
        </div>
        </div>
    </div>
    <!-- 结算时的模态框END -->

    <!-- 逻辑 -->
    <!-- 引入axios -->
    <!-- <script src="./js/axios.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入axios完毕 -->
    <script>
        // 拦截器START
            const send = axios.create({
                //Web服务器基地址
                baseURL: "http://127.0.0.1:3366",
                headers: {
                    'Access-Control-Allow-Origin': '*'
                }
            })

            // 添加请求拦截器
            send.interceptors.request.use(function (config) {
                // 在发送请求之前做些什么
                // 比如，设置请求头部验证
                //config.headers.Authorization = 'bearer ' + localStorage.getItem('ok_token')
                return config;
            }, function (error) {
                // 对请求错误做些什么
                return Promise.reject(error);
            });

            // 添加响应拦截器
            send.interceptors.response.use(function (response) {
                // 2xx 范围内的状态码都会触发该函数。
                // 对响应数据做点什么
                return response;
            }, function (error) {
                // 超出 2xx 范围的状态码都会触发该函数。
                // 对响应错误做点什么
                return Promise.reject(error);
            });
        // 拦截器END

        // A、B...
        const bh=['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        
        //储存你的答案
        let ojbk = []
        //储存正确答案
        let ojbkojbk = []
        // 答对个数
        let ok = 0

        let okk = document.querySelectorAll('#okk')
        window.onload=function(){
            send({
                    url: "/data.json",
                    method: "GET"
            }).then((res) => {
                console.log(res.data)
                // 顶部标题
                document.querySelector("header h3").innerHTML=res.data.title
                let list = document.querySelector('#list')
                console.log(list)
                for(let i = 0;i<res.data.list.length;i++){
                        // 炫题
                        list.innerHTML+=
                        `
                        <li>
                            <!-- 题START -->
                            <div class="neirong">
                                <span style="font-weight:bold;">${i+1+"、"+res.data.list[i].main}<span>
                            </div>
                            <!-- 题END -->
                            <!-- 答案START -->
                                <div id=${"daan"+res.data.list[i].id}>
                                    
                                </div>
                            <!-- 答案START -->
                        </li>
                        `

                        //初始化答案
                        ojbk.push(0)

                        let daan = document.querySelector('#daan'+res.data.list[i].id)
                        // 炫答案
                        for(let j=0;j<res.data.list[i].daan.length;j++){
                            daan.innerHTML+=`
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="t${i+1}" id="daanOk${i}" value="${j+1}">
                                <label class="form-check-label">
                                    ${bh[j]+"、"+res.data.list[i].daan[j]}
                                </label>
                            </div>
                            `   
                        }

                        ojbkojbk.push(res.data.list[i].ok)
                        console.log('正确答案',ojbkojbk)
                }

                // 炫完题和答案后给每个单选按钮绑定事件
                let li = document.querySelectorAll('.form-check')
                console.log(li)
                for(let i=0;i<li.length;i++){
                    // 鼠标点击
                    li[i].addEventListener("click",function(){
                        //点击将单选按钮设置为选中
                        li[i].childNodes[1].checked = true
                        // 把选中的答案存入数组
                        // 先获取第几题作为索引
                        //console.log(Number(li[i].childNodes[1].name.substr(-1)))
                        ojbk[Number(li[i].childNodes[1].name.substr(-1))-1]=li[i].childNodes[1].value
                        // li[i].childNodes[1].value
                        console.log('选中答案保存后',ojbk)
                    })
                    // 鼠标经过
                    li[i].addEventListener("mouseenter",function(){
                        li[i].style.backgroundColor = 'rgb(179, 179, 179)';
                    })
                    // 鼠标离开
                    li[i].addEventListener("mouseleave",function(){
                        li[i].style.backgroundColor = 'white';
                    })
                }
                
                // 渲染模态框中的表格
                let tr = document.querySelector('tbody')
                for(let i=0;i<res.data.list.length;i++){
                    tr.innerHTML+=`
                    <tr>
                        <th>${i+1}</th>
                        <th>${bh[res.data.list[i].ok-1]}</th>
                        <th id="okk"></th>
                    </tr>
                    `
                }
                okk = document.querySelectorAll('#okk')
            })
        }

        // 点击提交
        let tijiao = document.querySelector('#tijiao')
        
        tijiao.addEventListener("click",function(){
            let flag = false
            // 判断有无题没有做
            for(let i=0;i<okk.length;i++){
                if(ojbk[i]===0){
                    flag = true
                }
            }
            if(flag===true){
                alert('你题没做完')
                return
            }

            // 遍历判断正确
            for(let i=0;i<ojbkojbk.length;i++){
                if(ojbk[i]==ojbkojbk[i]) ok++
            }

            document.querySelector('#dd').innerHTML=ok
            document.querySelector('#df').innerHTML=(100*(ok/okk.length)).toFixed(2)

            // 打开模态框
            $('#myModal').modal('show');
            ok=0

            for(let i=0;i<okk.length;i++){
                okk[i].innerHTML=bh[ojbk[i]-1]
            }
        })

        // 重做
        document.querySelector('#cz').addEventListener('click',function(){
            location.reload()
        })

        // 关闭
        document.querySelector('#gb').addEventListener('click',function(){
            ok=0
        })
    </script>
</body>
</html>